<template>
	<div class="middle_chinaDataShowBox">
		<div class="middle_chinaDataShow" ref="messageechart"></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				list: [], //按确诊数排序的中国数据
				cityLists: [], //中国城市数据
				chinaDataOption: {},
				echarts: require('echarts'), //获取echarts
			}
		},
		methods: {
			createmessageechart: function() {
				this.$axios({
					method: 'post',
					url: 'http://route.showapi.com/2217-2?showapi_appid=610642&showapi_sign=200e35bac9af4e4ab0f0d360336098f6'
				}).then(response => {
					let len = response.data.showapi_res_body.todayDetailList.length
					let option = {
						title: {
							subtext: '国内排名Top10'
						},
						legend: {},
						tooltip: {},
						dataset: {
							dimensions: ['area', '确诊', '死亡', '治愈'],
							source: []
						},
						xAxis: {
							type: 'category',
							axisLabel: {
								interval: 0,
								rotate: 60
							},
						},
						yAxis: {},
						series: [{
								type: 'bar'
							},
							{
								type: 'bar'
							},
							{
								type: 'bar'
							}
						]
					}
					this.list = response.data.showapi_res_body.todayDetailList
					for (var i = 0; i < len - 1; i++) {
						for (var j = 0; j < len - i - 1; j++) {
							if (this.list[j].confirmedNum < this.list[j + 1].confirmedNum) {
								var temp = this.list[j + 1]
								this.list[j + 1] = this.list[j]
								this.list[j] = temp
							}
						}
					}
					for (var i = 0; i < len; i++) {
						let citylen = response.data.showapi_res_body.todayDetailList[i].cityList.length
						for (var j = 0; j < citylen; j++) {
							this.cityLists.push({
								provinceName: this.list[i].provinceName,
								cityName: this.list[i].cityList[j].cityName,
								locationId: this.list[i].cityList[j].locationId,
								confirmedNum: this.list[i].cityList[j].confirmedNum,
								deadNum: this.list[i].cityList[j].deadNum,
								suspectedNum: this.list[i].cityList[j].suspectedNum,
								curedNum: this.list[i].cityList[j].curedNum
							})
						}
					}
					for (var i = 0; i < 10; i++) {
						let message = this.list[i]
						option.dataset.source.push({
							area: '\n' + message.provinceName,
							'确诊': message.confirmedNum,
							'死亡': message.deadNum,
							'治愈': message.curedNum
						})
					}
					this.chinaDataOption = option
					let myChart = this.echarts.init(this.$refs.messageechart)
					myChart.setOption(this.chinaDataOption)
				}).catch(error => {
					console.log(error);
				})
			}
		},
		mounted() {
			this.createmessageechart()
			let myChart = this.echarts.init(this.$refs.messageechart)
			myChart.setOption(this.chinaDataOption)
			window.onresize = () => {
				setTimeout(() => {
					myChart.resize()
				}, 10)
			}
		}
	}
</script>

<style>
	.middle_chinaDataShowBox {
		position: relative;
	}

	.middle_chinaDataShow {
		padding: 10px;
		height: calc(50vh - 50px);
		text-align: center;
		border: 1px #F0F0F0 solid;
		background-color: white;
	}
</style>
